new Vue({
    el: '#app',
    data: function() {
        return {
            name: '', //查询关键字
            pageCurrent: 1, //当前页码
            pageSize: 8, //每页条数
            total: 0, //查询分页系总条数
            list: [], //专辑列表数据
            value: '0', //状态开关歌曲
            addFormVisible: false, //添加专辑表单信息开关
            // 添加专辑表单信息
            addFrom: '',
            // 表单验证规则
            rules: {
                albumName: [{
                    required: true,
                    message: '专辑名不能为空',
                    trigger: 'blur',
                }]
            },
            updateFormVisible: false, //修改专辑表单信息开关
            // 修改专辑表单信息
            updateFrom: '',
            isAllSelect: false, //是否全选
            ids: [], //列表展示多选框 id 数组
            headers: {
                "token": localStorage.getItem('token')
            },
            singerVisible: false, //分配专辑信息弹框按钮
            defaultProps: {
                children: 'children',
                label: 'label',
                // parentId: 'parentId'
            },
            // 上传专辑图片 文件列表
            fileImgList: [{
                name: '',
                url: ''
            }],
            showImgFileList: false,
            addAlbumId: '', //要添加专辑的 id
            // 要添加的专辑表单 
            addSingerList: {
                singerName: ''
            },
            // 添加专辑表单 专辑信息
            singerList: [{
                singerRemarks: '',
            }],
            singerId: -1, // 要添加歌手的 id 单选框绑定值
        }
    },
    mounted() { // 生命周期函数
        this.getPageInfo()
    },
    methods: {
        //获取分页列表数据
        getPageInfo() {
            // 清空数据
            this.list = ''
            console.log(this.name)
            if (this.name.trim() != '') { //判断是否添加了搜素关键字
                //获取token
                let jwtToken = localStorage.getItem('token')
                axios({
                    method: 'get',
                    url: 'http://localhost:8080/album/page' + '/' + this.pageCurrent + '/' + this
                        .pageSize + '/' + this.name,
                    headers: {
                        'token': jwtToken
                    }
                }).then(res => {
                    console.log(res.data)
                    if (res.data.code == 200) { //成功
                        let albumPageInfo = res.data.data.albumPage
                        //1、将后端返回的列表数据赋值给 list
                        // 专辑简介不必全部显示
                        for (var i = 0; i < albumPageInfo.records.length; i++) {
                            // 如果专辑简介不为 null
                            if (albumPageInfo.records[i].albumRemarks != null && albumPageInfo
                                .records[i]
                                .albumRemarks != '') {
                                // 对专辑简介截取，专辑简介文字太多了，这显示前50个字符 + ...
                                albumPageInfo.records[i].albumRemarks = albumPageInfo.records[i]
                                    .albumRemarks
                                    .slice(0, 50) + ' ...'
                            }
                        }
                        this.list = albumPageInfo.records

                        //2、将后端分页信息也赋值给前端相应字段
                        this.pageCurrent = albumPageInfo.current
                        this.pageSize = albumPageInfo.size
                        this.total = albumPageInfo.total
                    } else {
                        this.$message.error("系统错误请联系管理员！")
                    }
                })
            } else { //没有带关键字查询列表信息
                //获取token
                let jwtToken = localStorage.getItem('token')
                axios({
                    method: 'get',
                    url: 'http://localhost:8080/album/page' + '/' + this.pageCurrent + '/' + this
                        .pageSize,
                    headers: {
                        'token': jwtToken
                    }
                }).then(res => {
                    console.log(res.data)
                    if (res.data.code == 200) { //成功
                        let albumPageInfo = res.data.data.albumPage
                        // 1、将后端返回的列表数据赋值给 list
                        // 专辑简介不必全部显示
                        for (var i = 0; i < albumPageInfo.records.length; i++) {
                            // 如果专辑简介不为 null
                            if (albumPageInfo.records[i].albumRemarks != null && albumPageInfo
                                .records[i]
                                .albumRemarks != '') {
                                // 对专辑简介截取，专辑简介文字太多了，这显示前50个字符 + ...
                                albumPageInfo.records[i].albumRemarks = albumPageInfo.records[i]
                                    .albumRemarks
                                    .slice(0, 50) + ' ...'
                            }
                        }
                        this.list = albumPageInfo.records

                        //2、将后端分页信息也赋值给前端相应字段
                        this.pageCurrent = albumPageInfo.current
                        this.pageSize = albumPageInfo.size
                        this.total = albumPageInfo.total
                    } else {
                        this.$message.error("系统错误请联系管理员！")
                    }
                })
            }
        },
        //更新每页条数
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.pageSize = val
            this.getPageInfo()
        },
        //更新当前页
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.pageCurrent = val
            this.getPageInfo()
        },
        //改变专辑状态
        changeStatus(id, status) {
            console.log(id)
            console.log(status)
            //获取token
            let jwtToken = localStorage.getItem('token')
            axios({
                method: 'get',
                url: 'http://localhost:8080/album/status' + '/' + id + '/' + status,
                headers: {
                    'token': jwtToken
                }
            }).then(res => {
                console.log(res)
            })
        },
        // 添加专辑
        addSubmit() {
            //获取token
            let jwtToken = localStorage.getItem('token')
            /* 判断此时上传列表中是否有数据，如果列表为空就传个null
               不判断会有bug，即用户第一次上传了文件没有点击提交，
               然后第二次填写了基本信息没有提交图片，会直接读浏览器本地，
               莫名传了个图片到后端。
            */ 
            let albumImg = localStorage.getItem('albumAddImgUrl') 
            this.fileImgList.length === 0 ? null:albumImg
            axios({
                method: 'post',
                url: 'http://localhost:8080/album/add',
                headers: {
                    'token': jwtToken
                },
                data: {
                    'albumName': this.addFrom.albumName,
                    'albumCompany': this.addFrom.albumCompany,
                    'albumRemarks': this.addFrom.albumRemarks,
                    'albumReleaseTime': this.addFrom.albumReleaseTime,
                    'albumImg': albumImg,
                    'albumStatus': 0,
                }
            }).then(res => {
                if (res.data != undefined && res.data.code == 200) {
                    console.log(res.data)
                    // 刷新列表数据，重新求情列表数据
                    this.getPageInfo()
                    // 打印提示信息
                    this.$message.success(res.data.message)
                    // 关闭添加表单
                    this.addFormVisible = false
                } else { //失败
                    this.$message.error(res.data.message)
                }
                // 清空本地存储的图片地址
                localStorage.removeItem('albumAddImgUrl')
            })
        },
        // 打开添加表单
        openAddForm() {
            // 清空数据
            this.addFrom = {}
            this.fileImgList = []
            // 打开表单
            this.addFormVisible = true
        },
        // 添加图片文件 改变时会调用
        handleChangeAddImg(file, fileList) {
            // 显示文件列表
            this.showImgFileList = true
            if (fileList.length > 0) {
                this.fileImgList = [fileList[fileList.length - 1]] // 显示最后一次选择的文件
            }
        },
        // 文件上传前调用 判断文件大小、类型
        beforeUploadAddImg(file) {
            // file.type image/jpeg image/png 
            // 对 file.type.slice(0, 5) image 进行截取，判断是否是图片
            const isImage = file.type.slice(0, 5) === 'image';
            const isLt30M = file.size / 1024 / 1024 < 30;
            if (!isImage) {
                this.$message.error('上传的文件不是图片!');
            }
            if (!isLt30M) {
                this.$message.error('上传图片大小不能超过 30MB!');
            }
            return isImage && isLt30M;
        },
        // 文件上传成功后的回调函数
        uploadAddImgSuccess(response, file, fileList) {            
            console.log(response)
            // 成功调用上传按钮					
            if (response.code == 200) { 
                this.$message.success(response.message);
                // 获取文件访问地址
                var albumAddImgUrl = response.data.albumImgUrl
                // 将文件访问地址保存到 本地会话空间
                localStorage.setItem('albumAddImgUrl', albumAddImgUrl)
            } else {
                this.$message.error(response.message);
            }
            //刷新列表数据，重新求情列表数据
            // this.getPageInfo()
        },
        // 单个删除，根据歌曲id,删除歌曲数据
        deleteById(id) {
            //获取token
            let jwtToken = localStorage.getItem('token')
            axios({
                method: 'delete',
                url: 'http://localhost:8080/album/delete/' + id,
                headers: {
                    'token': jwtToken
                }
            }).then(res => {
                if (res.data != undefined && res.data.code == 200) {
                    console.log(res.data)
                    // 打印后端返回的消息
                    this.$message.success(res.data.message)
                    //刷新列表数据，重新求情列表数据
                    this.getPageInfo()
                } else { //失败
                    this.$message.error(res.data.message)
                }
            })
        },
        // 根据id，查询专辑并显示到修改表单中
        update(id) {
            //获取token
            let jwtToken = localStorage.getItem('token')
            axios({
                method: 'get',
                url: 'http://localhost:8080/album/selectOne/' + id,
                headers: {
                    'token': jwtToken
                }
            }).then(res => {
                if (res.data != undefined && res.data.code == 200) {
                    console.log(res.data)
                    this.updateFrom = res.data.data.album
                    console.log(this.updateFrom)
                    // 清空数据
                    this.fileImgList = []
                    // 打开修改表单
                    this.updateFormVisible = true
                } else { //失败
                    this.$message.error(res.data.message)
                }
            })
        },
        // 修改专辑
        updateSubmit(id) {
            // 获取token
            let jwtToken = localStorage.getItem('token')
            // 获取浏览器本地存储空间的，修改时上传的文件
            let albumImg = localStorage.getItem('albumUpdateImgUrl') 
            this.fileImgList.length === 0 ? null:albumImg
            axios({
                method: 'put',
                url: 'http://localhost:8080/album/update',
                headers: {
                    'token': jwtToken
                },
                data: {
                    albumId: this.updateFrom.albumId,
                    albumName: this.updateFrom.albumName,
                    albumStatus: this.updateFrom.albumStatus,
                    albumReleaseTime: this.updateFrom.albumReleaseTime,
                    albumCompany: this.updateFrom.albumCompany,
                    albumRemarks: this.updateFrom.albumRemarks,
                    albumImg: albumImg
                }
            }).then(res => {
                if (res.data != undefined && res.data.code == 200) {
                    console.log(res.data)
                    this.$message.success(res.data.message)
                    //关闭修改表单
                    this.updateFormVisible = false
                    //刷新列表数据，重新求情列表数据
                    this.getPageInfo()
                } else { //失败
                    this.$message.error(res.data.message)
                }
                // 清空本地存储的图片地址
                localStorage.removeItem('albumAddImgUrl')
            })
        },
        // 文件上传成功后的回调函数
        uploadUpdateImgSuccess(response, file, fileList) {            console.log(response)
            console.log("文件上传成功！")
            console.log(response)
            // 成功调用上传按钮					
            if (response.code == 200) { 
                this.$message.success(response.message);
                // 获取文件访问地址
                let albumAddImgUrl = response.data.albumImgUrl
                // 将文件访问地址保存到 本地会话空间
                localStorage.setItem('albumUpdateImgUrl', albumAddImgUrl)
            } else {
                this.$message.error(response.message);
            }
            //刷新列表数据，重新求情列表数据
            // this.getPageInfo()
        },
        //e事件源，谁发生了这件事
        allSelect(e) {
            this.ids = []
            // 设置全选状态
            this.isAllSelect = e.target.checked
            // 如果是选中状态,将所有的id到ids中
            if (this.isAllSelect) {
                //添加所有的id到ids中
                this.list.forEach(element => {
                    this.ids.push(element.albumId)
                });
            }
            console.log(this.ids)
        },
        ckSelect(e) {
            let id = e.target._value
            if (e.target.checked) { //选中，把对应的id添加到ids数组
                this.ids.push(id)
            } else { // 未选中，查找ids有没有对应的id，如果有删除掉
                let delindex = this.ids.indexOf(id)
                if (delindex > -1) {
                    this.ids.splice(delindex, 1)
                }
            }
            console.log(this.ids)
        },
        //批量删除
        deteleBatch() {
            console.log(this.ids)
            //获取token
            let jwtToken = localStorage.getItem('token')
            axios({
                method: 'delete',
                url: 'http://localhost:8080/album/deleteBatch',
                headers: {
                    'token': jwtToken
                },
                data: this.ids
            }).then(res => {
                if (res.data != undefined && res.data.code == 200) {
                    console.log(res.data)
                    // 打印后端返回的消息
                    this.$message.success(res.data.message)
                    //刷新列表数据，重新求情列表数据
                    this.getPageInfo()
                    // 清空 ids 数组
                    this.ids = []
                } else { //失败
                    this.$message.error(res.data.message)
                }
            })
        },
        // 打开添加歌手表单
        addSinger(id) {
            // 打开添加歌手表单
            this.singerVisible = true
            this.addAlbumId = id
            // 清空数据
            this.addSingerList = {}
            this.singerList = ''
            this.singerId = -1
        },
        // 歌手输入框失去焦点事件
        getSingerByName(singerName) {
            console.log("失去焦点:" + singerName)
            // 清空数据
            this.singerList = ''
            this.singerId = -1
            // 非空判断
            if (singerName == null || singerName == '') {
                this.$message.error('请输入用户名')
            } else {
                // 获取token
                let jwtToken = localStorage.getItem('token')
                axios({
                    method: 'get',
                    url: 'http://localhost:8080/singer/getSingerByName/' + singerName,
                    headers: {
                        'token': jwtToken
                    },
                }).then(res => {
                    if (res.data != undefined && res.data.code == 200) {
                        console.log(res.data)
                        // 赋值
                        this.singerList = res.data.data.singerList
                    } else { //失败
                        this.$message.error(res.data.message)
                    }
                })
            }
        },
        // 添加歌手与专辑
        addSingerSubmit(albumId, singerId) {
            console.log('专辑id : ' + albumId)
            console.log('歌手id:' + singerId)
            if (singerId == -1) {
                this.$message.error('请选择要添加歌手')
            } else {
                //获取token
                let jwtToken = localStorage.getItem('token')
                axios({
                    method: 'post',
                    url: 'http://localhost:8080/album/addSingerForAlbum/' + albumId + '/' +
                        singerId,
                    headers: {
                        'token': jwtToken
                    },
                }).then(res => {
                    if (res.data != undefined && res.data.code == 200) {
                        console.log(res.data)
                        this.$message.success(res.data.message)
                        //刷新数据
                        this.getPageInfo()
                        this.singerVisible = false
                    } else { //失败
                        this.$message.error(res.data.message)
                    }
                })
            }
        }
    }
})